<template>
	<view class="container">
		<view v-if="step===1" class="form-box">
			<picker mode="selector" :range="colorArr" range-key="key" @change="changeColor">
				<view class="form-item">
					<view class="label">
						车辆颜色
					</view>
					<view class="value">
						<input v-model="driverRegisterInfo.carColor" placeholder="车辆颜色"/>
					</view>
				</view>
			</picker>
			<view class="form-item">
				<view class="label">
					车辆品牌-型号
				</view>
				<view class="value">
					<input v-model="driverRegisterInfo.carBrand" placeholder="车辆品牌型号例:本田锋范"/>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					车牌号
				</view>
				<view class="value">
					<input v-model="driverRegisterInfo.carNo" placeholder="请输入车牌号"/>
				</view>
			</view>
			<picker mode="selector" :range="seatsArr" @change="changeSeats">
				<view class="form-item">
					<view class="label">
						车辆座位数
					</view>
					<view class="value">
						<input v-model="driverRegisterInfo.seats" placeholder="请输入车辆座位数"/>
						<text>座</text>
					</view>
				</view>
			</picker>
			<view class="form-item">
				<view class="label">
					车辆性质
				</view>
				<view class="value">
					<radio-group @change="changeCarType">
						<label>
							<radio :value="1" :checked="driverRegisterInfo.carType===1" />运营车辆
						</label>
						<label>
							<radio style="padding-left: 10rpx;" :value="2"  :checked="driverRegisterInfo.carType===2"/>非运营车辆
						</label>
					</radio-group>
				</view>
			</view>
			<view class="btn-submit-box">
				<view class="btn-submit" @click="clickNextStep">
					下一步
				</view>
			</view>
		</view>
		<view v-if="step===2" class="cnt">
			<view class="title">请打开双闪，正对车尾拍摄距离车辆正后方1-2米完成拍摄</view>
			<view class="item" @click="toUpload(1)">
				<image v-if="driverRegisterInfo.carImg" :src="driverRegisterInfo.carImg" class="bg"></image>
				<image v-else src="@/static/img/jiashizheng-example.png" class="bg"></image>
				<view class="tips-box" v-if="!driverRegisterInfo.carImg">
					<image class="xiangji" src="@/static/img/xiangji.png"></image>
					<view class="tips">拍摄/上传真实车辆照片</view>
				</view>
			</view>
			
			<view class="btn-submit-box">
				<view class="btn-submit btn-submit-waite" @click="step=1">
					上一步
				</view>
				<view class="btn-submit" @click="clickConfirm" v-if="driverRegisterInfo && driverRegisterInfo.carImg">
					确认并提交
				</view>
			</view>
		</view>
		
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="msgText" :duration="3000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {driverRegSubmit} from '@/api/api.js';
	
	export default {
		data() {
			return {
				step: 1,
				driverRegisterInfo:{
					carImg:null
				},
				msgType:'',
				msgText:'',
				colorArr:[
					{key:'白色',value:'#FFFFFF'},
					{key:'黑色',value:'#000000'},
					{key:'红色',value:'#FF0000'}
				],
				seatsArr:[
					4,5,6,7
				]
			}
		},
		onLoad() {
			let p = uni.getStorageSync('driverRegisterInfo');
			if(p){
				this.driverRegisterInfo.carColor = p.carColor;
				this.driverRegisterInfo.carBrand = p.carBrand;
				this.driverRegisterInfo.carNo = p.carNo;
				this.driverRegisterInfo.seats = p.seats;
				this.driverRegisterInfo.carType = p.carType;
				this.driverRegisterInfo.carImg = p.carImg;
			}
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			clickConfirm(){
				if(!this.driverRegisterInfo.carImg){
					this.msgType = 'warn';
					this.msgText = '请上传车辆图片';
					this.$refs.message.open();
					return false;
				}
				driverRegSubmit(this.driverRegisterInfo).then(res=>{
					if(res && res.data){
						this.msgType = 'success';
						this.msgText = '提交成功';
						this.$refs.message.open();
						uni.navigateBack();
					}
					else {
						this.msgType = 'error';
						this.msgText = '提交失败';
						this.$refs.message.open();
					}
				}).catch(res=>{
					this.msgType = 'error';
					this.msgText = '提交失败';
					this.$refs.message.open();
				})
			},
			toUpload(n){
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					name: 'multipart',
					model: "driver",
					pid: 0,
					count: 1
				}, function(res) {
					if(n===1){
						that.driverRegisterInfo.carImg = res;
					}
				});
			},
			changeColor(e){
				this.driverRegisterInfo.carColor = this.colorArr[e.detail.value].key;
				this.$forceUpdate();
			},
			changeSeats(e){
				this.driverRegisterInfo.seats = this.seatsArr[e.detail.value];
				this.$forceUpdate();
			},
			changeCarType(e){
				console.log(e)
				this.driverRegisterInfo.carType = e.detail.value;
				this.$forceUpdate();
			},
			clickNextStep(){
				if(!this.driverRegisterInfo.carColor){
					this.msgType = 'warn';
					this.msgText = '请选择车辆颜色';
					this.$refs.message.open();
					return false;
				}
				if(!this.driverRegisterInfo.carBrand){
					this.msgType = 'warn';
					this.msgText = '请填写车辆品牌-型号';
					this.$refs.message.open();
					return false;
				}
				if(!this.driverRegisterInfo.carNo){
					this.msgType = 'warn';
					this.msgText = '请填写车牌号';
					this.$refs.message.open();
					return false;
				}
				if(!this.driverRegisterInfo.seats){
					this.msgType = 'warn';
					this.msgText = '请选择车辆座位数';
					this.$refs.message.open();
					return false;
				}
				if(!this.driverRegisterInfo.carType){
					this.msgType = 'warn';
					this.msgText = '请选择车辆性质';
					this.$refs.message.open();
					return false;
				}
				this.step = 2;
			}
		}
	}
</script>

<style scoped lang="scss">
	.container{
		width: 100%;
		height: 100%;
		.cnt{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 30rpx;
			.title{
				padding: 0 30rpx;
				padding-top: 30rpx;
				font-size: 33rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			.item{
				position: relative;
				width: 558rpx;
				height: 335rpx;
				border: 3rpx solid #6FC65E;
				border-radius: 21rpx;
				overflow: hidden;
				.bg{
					width: 558rpx;
					height: 335rpx;
					z-index: 9;
				}
				.tips-box{
					position: absolute;
					top: 0;
					z-index: 99;
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					background-color: rgba(0, 0, 0, 0.5);
					gap: 26rpx;
					.xiangji{
						width: 82rpx;
						height: 67rpx;
						background: #3D3D3D;
					}
					.tips{
						font-size: 29rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
		}
	}
	.btn-submit-box{
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		gap: 30rpx
	}
	.btn-submit{
		flex: 1;
		height: 94rpx;
		background: #6FC65E;
		border-radius: 47rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 38rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}
	.btn-submit-waite{
		background: #FFFFFF !important;
		color: #6FC65E !important;
		border: 1rpx solid #6FC65E;
	}
	.form-box{
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}
	.form-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 30rpx;
		padding: 50rpx 30rpx;
		border-bottom: 1rpx solid #DFDFDF;
		.label{
			font-size: 33rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		.value{
			flex: 1;
			font-size: 33rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #999999;
			display: flex;
			text-align: right;
			justify-content: flex-end;
		}
	}
	.uni-nav-bar-text {
		width: 100%;
		font-size: 36rpx !important;
		font-weight: 600 !important;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
